<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>认识Javascript |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/40.cadafdd6.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Javascipt</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/js/01-认识javaScript.html" class="active sidebar-link">01-认识javaScript</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/js/01-认识javaScript.html#认识javascript" class="sidebar-link">认识Javascript</a></li></ul></li><li><a href="/./guide/notes/js/02-变量与数据类型介绍.html" class="sidebar-link">02-变量与数据类型介绍</a></li><li><a href="/./guide/notes/js/03-基础dom操作.html" class="sidebar-link">03-基础dom操作</a></li><li><a href="/./guide/notes/js/04-表达式和操作符.html" class="sidebar-link">04-表达式和操作符</a></li><li><a href="/./guide/notes/js/05-判断.html" class="sidebar-link">05-判断</a></li><li><a href="/./guide/notes/js/06-循环.html" class="sidebar-link">06-循环</a></li><li><a href="/./guide/notes/js/07-算法拓展.html" class="sidebar-link">07-算法拓展</a></li><li><a href="/./guide/notes/js/08-函数.html" class="sidebar-link">08-函数</a></li><li><a href="/./guide/notes/js/09-作用域,闭包,预解析.html" class="sidebar-link">09-作用域,闭包,预解析</a></li><li><a href="/./guide/notes/js/10-数组.html" class="sidebar-link">10-数组</a></li><li><a href="/./guide/notes/js/11-字符串.html" class="sidebar-link">11-字符串</a></li><li><a href="/./guide/notes/js/12-类型转换.html" class="sidebar-link">12-类型转换</a></li><li><a href="/./guide/notes/js/13-DOM进阶.html" class="sidebar-link">13-DOM进阶</a></li><li><a href="/./guide/notes/js/14-dom事件与机制.html" class="sidebar-link">14-dom事件与机制</a></li><li><a href="/./guide/notes/js/15-浏览器M操作.html" class="sidebar-link">15-浏览器M操作</a></li><li><a href="/./guide/notes/js/16-toProject.html" class="sidebar-link">16-toProject</a></li><li><a href="/./guide/notes/js/17-内置数学和时间project.html" class="sidebar-link">17-内置数学和时间project</a></li><li><a href="/./guide/notes/js/18-各种距离宽高获取.html" class="sidebar-link">18-各种距离宽高获取</a></li><li><a href="/./guide/notes/js/19-正则表达式.html" class="sidebar-link">19-正则表达式</a></li><li><a href="/./guide/notes/js/21-箭头函数.html" class="sidebar-link">20箭头函数</a></li><li><a href="/./guide/notes/js/22-解构赋值.html" class="sidebar-link">21-解构赋值</a></li><li><a href="/./guide/notes/js/23-project字面量增强和函数默认参数.html" class="sidebar-link">22-project字面量增强和函数默认参数</a></li><li><a href="/./guide/notes/js/24-剩余参数和展开运算符.html" class="sidebar-link">23-剩余参数和展开运算符</a></li><li><a href="/./guide/notes/js/25-Set 和 Map数据结构和Symbol.html" class="sidebar-link">24-Set 和 Map数据结构和Symbol</a></li><li><a href="/./guide/notes/js/26-遍历器和for-of循环.html" class="sidebar-link">25-遍历器和for-of循环</a></li><li><a href="/./guide/notes/js/27-Promise.html" class="sidebar-link">26-Promise</a></li><li><a href="/./guide/notes/js/28-Clsss类.html" class="sidebar-link">27-Clsss类</a></li><li><a href="/./guide/notes/js/29-module模块.html" class="sidebar-link">28-module模块</a></li><li><a href="/./guide/notes/js/30-Babel.html" class="sidebar-link">29-Babel</a></li><li><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html" class="sidebar-link">30-前后端通信和HTTP协议</a></li><li><a href="/./guide/notes/js/32-本地存储.html" class="sidebar-link">31-本地存储</a></li><li><a href="/./guide/notes/js/33-ajax.html" class="sidebar-link">32-ajax</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="认识javascript"><a href="#认识javascript" class="header-anchor">#</a> 认识Javascript</h2> <h3 id="javascript简史"><a href="#javascript简史" class="header-anchor">#</a> javascript简史</h3> <blockquote><p>JavaScript 诞生于1995 年。</p> <p>JavaScript是一种基于对象和事件驱动的客户端脚本语言,</p> <p>最初的设计是为了检验HTML表单输入的正确性,</p> <p>起源于Netscape公司的LiveScript语言。</p></blockquote> <p>ECMAScript  欧洲计算机制造商协会</p> <p>1997年1月  -  ECMAScript1诞生</p> <p>1998年1月  -  ECMAScript2修正</p> <p>1999年12月  -  ECMAScript3修正</p> <p>（ECMAscript4 由于关于语言的复杂性出现分歧,第4版本被放弃,其中的部分成为了第5版本的基础）</p> <p>2009年  -  ECMAScript5修正</p> <p>2015年  -  ECMAScript6修正（也称为ES2015）</p> <p>从2015开始每年例行更新</p> <p>我们现在要学习的是ES5，之后会学习 ES6 。</p> <p>ie等极少数浏览器不支持ES6</p> <p><em>js 就是 javascript的简写</em></p> <h3 id="什么是编程语言"><a href="#什么是编程语言" class="header-anchor">#</a> 什么是编程语言?</h3> <p>总结：编程语言就是让计算机执行一些任务的特殊指令</p> <h3 id="为什么学习-javascript"><a href="#为什么学习-javascript" class="header-anchor">#</a> 为什么学习 JavaScript？</h3> <blockquote><p>全世界几乎所有网页都使用 JavaScript</p></blockquote> <h4 id="广泛的使用领域"><a href="#广泛的使用领域" class="header-anchor">#</a> 广泛的使用领域</h4> <blockquote><p><strong>浏览器的平台化</strong></p> <p>不再仅仅能浏览网页，而是越来越像一个平台，JavaScript 因此得以调用许多系统功能，比如操作本地文件、操作图片、调用摄像头和麦克风等等。</p> <p><strong>Node</strong></p> <p>Node 项目使得 JavaScript 可以用于开发服务器端的大型项目</p> <p><strong>数据库操作</strong></p> <p>JavaScript 甚至也可以用来操作数据库,大部分 NoSQL 数据库允许 JavaScript 直接操作</p> <p><strong>移动平台开发</strong></p> <p>JavaScript 也正在成为手机应用的开发语言</p> <p><strong>跨平台的桌面应用程序</strong></p> <p>著名程序员 Jeff Atwood 甚至提出了一条 <a href="http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html" target="_blank" rel="noopener noreferrer">“Atwood 定律”<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>：</p> <p>“所有可以用 JavaScript 编写的程序，最终都会出现 JavaScript 的版本。”</p></blockquote> <h4 id="易学性"><a href="#易学性" class="header-anchor">#</a> 易学性</h4> <ul><li><strong>学习环境无处不在</strong></li></ul> <p>只要有浏览器，就能运行 JavaScript 程序；只要有文本编辑器，就能编写 JavaScript 程序。</p> <ul><li><strong>简单性</strong></li></ul> <p>本身的语法特性并不是特别多。你完全可以只用简单命令，完成大部分的操作。</p> <ul><li><strong>与主流语言的相似性</strong></li></ul> <p>JavaScript 的语法很类似 C/C++ 和 Java，如果学过这些语言,JavaScript的入门会非常容易。</p> <h4 id="强大的性能"><a href="#强大的性能" class="header-anchor">#</a> 强大的性能</h4> <ul><li><strong>灵活的语法，表达力强</strong></li> <li><strong>支持编译运行</strong></li></ul> <blockquote><p>在现代浏览器中，JavaScript 都是编译后运行。程序会被高度优化，运行效率接近二进制程序。</p></blockquote> <h4 id="社区支持和就业机会"><a href="#社区支持和就业机会" class="header-anchor">#</a> 社区支持和就业机会</h4> <blockquote><p>全世界程序员都在使用 JavaScript，它有着极大的社区、广泛的文献和图书、丰富的代码资源。</p> <p>作为项目负责人，你不难招聘到数量众多的 JavaScript 程序员；</p> <p>作为开发者，你也不难找到一份 JavaScript 的工作。</p></blockquote> <h3 id="主流浏览器"><a href="#主流浏览器" class="header-anchor">#</a> 主流浏览器</h3> <p>IE/Edge、Chrome、Firefox、Safari、Opera （国内各浏览器介绍).</p> <p>常用的：chrome、Firefox、ie（系统自带）</p> <p>其他浏览器：360浏览器（chrome和ie的内核）、qq浏览器、搜狗浏览器。</p> <p>百度统计：<a href="https://tongji.baidu.com/data/browser" target="_blank" rel="noopener noreferrer">浏览器市场份额<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <ul><li>浏览器组成-外壳</li></ul> <p>界面、菜单、网络、调试功能……</p> <ul><li>浏览器组成-内核</li></ul> <p>浏览器内核：</p> <table><thead><tr><th>浏览器</th> <th>渲染引擎</th> <th>JS引擎</th></tr></thead> <tbody><tr><td>IE</td> <td>Trident</td> <td>JScript -&gt; Chakra</td></tr> <tr><td>Firefox</td> <td>Gecko</td> <td>Monkey系列</td></tr> <tr><td>Chrome</td> <td>Webkit -&gt; Blink</td> <td>V8</td></tr> <tr><td>Safari</td> <td>Webkit</td> <td>SquirrelFish系列</td></tr> <tr><td>Opera</td> <td>Presto -&gt; Blink</td> <td>Carakan</td></tr></tbody></table> <p>渲染引擎：将html和css代码渲染成图形界面</p> <p>js引擎：解析js代码</p> <p>V8引擎为解析js代码最快的js引擎</p> <h3 id="v8引擎与nodejs"><a href="#v8引擎与nodejs" class="header-anchor">#</a> V8引擎与nodejs</h3> <blockquote><p>我们写javascript  -&gt;  在chrome中通过 V8 引擎编译  -&gt;  机器语言（用二进制代码表示的计算机能直接识别和执行的一种机器指令）</p> <p>Chrome浏览器中用来解析JavaScript的引擎就是V8引擎,有了V8引擎JavaScript才能在计算机上执行</p> <p>所以，正是有了 V8引擎的解析， javascript才能在计算机上执行</p> <p>那么，从本质上讲，javascript的执行需要的不是浏览器，而是V8引擎</p> <p>所以，我们把 V8引擎 单独安装在系统上，那么javascript就可以直接在系统上运行</p> <p>=&gt;   也就获得了直接操作电脑本地数据的能力，也就可以完成后端的工作</p> <p>=&gt;  这个独立出来的V8引擎，再加上一些其他的功能就变成了nodejs</p></blockquote> <h3 id="基础问题"><a href="#基础问题" class="header-anchor">#</a> 基础问题</h3> <ul><li><strong>JavaScript是什么</strong></li></ul> <blockquote><p>专业一点：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。</p> <p>通俗一点：JS是前端代码中最重要的部分（行为层），常用来<em>操作HTML页面</em>，<em>响应用户的操作</em>，<em>验证传输数据</em>等。</p></blockquote> <ul><li><strong>Java和JavaScript有什么关系</strong></li></ul> <blockquote><p>没有太大的关系……是两种不一样的语言,但是彼此存在联系。</p> <p>JavaScript 的基本语法和对象体系，是模仿 Java 而设计的。</p> <p>它最初叫 Mocha， 接着改名为 LiveScript，最后才确定命名为 JavaScript，  目的之一就是“看上去像Java”</p></blockquote> <ul><li><strong>jQuery（JQ）和 JS 有什么关系?</strong></li></ul> <blockquote><p>jQuery是由JS编写的……，js和jq可以同时编写</p></blockquote> <ul><li><strong>NodeJs 和 JS 有什么关系</strong></li></ul> <blockquote><p>NodeJs是后端语言，以JS代码来驱动C语言实现后端功能……，降低了前段人员学习后端的难度</p></blockquote> <ul><li><strong>ECMAScript 和 JavaScript 的关系</strong></li></ul> <blockquote><p>前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。ECMAScript 只用来标准化 JavaScript 这种语言的基本语法结构。</p></blockquote> <h3 id="javascript的组成"><a href="#javascript的组成" class="header-anchor">#</a> javascript的组成</h3> <ul><li>核心（ECMAScript）：提供核心语言功能，规定语法规范。</li> <li>文档对象模型（DOM）：提供访问和操作网页元素的方法和接口，由html页面中的标签组成</li> <li>浏览器对象模型（BOM）：提供与浏览器交互的方法与接口，即浏览器中前进、后退、刷新等功能</li></ul> <h3 id="开发工具"><a href="#开发工具" class="header-anchor">#</a> 开发工具</h3> <blockquote><p>开发工具：WebStorm、sublime、HBuilder、vscode、atom 等（<strong>推荐使用vscode</strong>）</p> <p>vscode下载地址： https://code.visualstudio.com/ ，根据自己的操作系统下载相应的版本。</p> <p>不推荐使用DW（Dreamweaver），EditPlus（没有提示功能，影响开发效率）</p></blockquote> <h3 id="vscode"><a href="#vscode" class="header-anchor">#</a> vscode</h3> <blockquote><p>VS Code 这款软件本身，是用 JavaScript 语言编写的</p> <p>Jeff Atwood 在 2007 年提出了著名的 Atwood 定律：</p> <p><strong>任何能够用 JavaScript 实现的应用系统，最终都必将用 JavaScript 实现</strong>。</p> <p>如果你是做前端开发（JavaScript 编程语言为主),这款软件是为前端同学量身定制的。</p></blockquote> <h4 id="vscode常用插件"><a href="#vscode常用插件" class="header-anchor">#</a> vscode常用插件：</h4> <blockquote><p><strong>chinese</strong>   汉化插件</p> <p><strong>open in browser</strong>     右键打开浏览器</p> <p><strong>Live Server</strong>      开启自动刷新功能</p> <p><strong>Prettier</strong>     代码格式化  让代码的展示更加美观</p> <p><strong>vscode-icons</strong>     根据文件的后缀名来显示不同的图标</p> <p><strong>Bracket Pair Colorizer 2 **    以不同颜色显示成对的括号，并用连线标注括号范围。简称</strong>彩虹括号**。</p> <p><strong>CSS Peak</strong>  在HTML通过对应标签的名字快速跳转到对应的CSS</p> <p><strong>Image preview</strong> 图片预览</p></blockquote> <h4 id="快捷键"><a href="#快捷键" class="header-anchor">#</a> 快捷键</h4> <p><strong>基操</strong></p> <blockquote><p><strong>ctrl+c</strong>  复制   <strong>ctrl+V</strong> 粘贴      <strong>ctrl+s</strong>  保存     <strong>ctrl+x</strong>剪切  也可以用于删除整行</p> <p><strong>ctrl+z</strong>  返回上一步    <strong>ctrl+y</strong> 撤销返回上一步</p> <p><strong>ctrl + f</strong> 查询/替换</p> <p><img src="https://s1.ax1x.com/2020/09/05/wE6cz8.png" alt="wE6cz8.png"></p></blockquote> <p><strong>跳转操作</strong></p> <blockquote><p><strong>Cmd +Pagedown/Pageup</strong>   		在已经打开的多个文件之间进行   非常实用</p> <p><strong>Ctrl + Tab</strong>    								在已经打开的多个文件之间进行</p></blockquote> <p><strong>移动光标</strong></p> <blockquote><p><strong>方向键</strong>        						在单个字符之间移动光标      地球人都知道</p> <p><strong>Alt＋鼠标点击任意位</strong>			在任意位置，同时出现光标</p> <p><strong>Ctrl + D</strong>                                  将全文中相同的词逐一加入选择</p></blockquote> <p><strong>工作区快捷键</strong></p> <blockquote><p><strong>Cmd +B</strong>   显示/隐藏侧边栏    很实用</p> <p><em><strong>Ctrl + \</strong></em>     创建多个编辑器</p> <p><strong>Cmd + Shift+N</strong>  重新开一个软件的窗口</p> <p><strong>Ctrl + W</strong>     关闭当前文件</p></blockquote> <p><strong>其他快捷键</strong></p> <blockquote><p><strong>shift + alt + f</strong>     代码格式化快捷键</p> <p><strong>shift + alt + ↓</strong>     向下复制一份 ： 选中要复制的内容</p></blockquote> <p><strong>鼠标操作</strong></p> <blockquote><p>在当前行的位置，鼠标三击，可以选中当前行。</p> <p>用鼠标单击文件的<strong>行号</strong>，可以选中当前行。</p></blockquote> <p><strong>快捷键列表</strong></p> <p><img src="https://s1.ax1x.com/2020/09/05/wErkUx.png" alt="wErkUx.png"></p> <h3 id="markdown文件"><a href="#markdown文件" class="header-anchor">#</a> markdown文件</h3> <blockquote><p>下载并安装 Typora/马克飞象 进行查看 .md 文件</p></blockquote> <h3 id="引入javascript"><a href="#引入javascript" class="header-anchor">#</a> 引入javascript</h3> <h4 id="_1-内部引入"><a href="#_1-内部引入" class="header-anchor">#</a> 1.内部引入</h4> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    html标签部分
	...
    ...
    
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        js代码块部分
		<span class="token operator">...</span>
        <span class="token operator">...</span>
        <span class="token comment">//script标签最好写在 head 标签 或 body 标签中，</span>
        <span class="token comment">//如果放在head或body外，浏览器在解析时，也会将script标签放在head或body中。</span>
        <span class="token comment">//script标签通常放在body的最后面。</span>
        <span class="token comment">// 页面的解析是按顺序解析的，所以若在 body 前获取dom元素，则需要使用 window.onload</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h4 id="_2-外部引入"><a href="#_2-外部引入" class="header-anchor">#</a> 2.外部引入</h4> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>    
    <span class="token comment">&lt;!-- 注意不能是单标签
		若使用外部引入js文件的方式，script标签中的代码块不会被解析
	--&gt;</span>
  
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h4 id="_3-标签内引入"><a href="#_3-标签内引入" class="header-anchor">#</a> 3.标签内引入</h4> <blockquote><p>假设我们想响应用户的操作（比如点击）可以直接把is代码写在标签属性里面</p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'div被点击了'</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token punctuation">&gt;</span></span>
        哈哈哈
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>


// 没有特殊情况，不建议使用此方法
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="console-控制台输出"><a href="#console-控制台输出" class="header-anchor">#</a> console 控制台输出</h3> <ul><li>console.log  普通输出</li></ul> <p><code>console.log</code>方法用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span>
<span class="token comment">// Hello World</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">)</span>
<span class="token comment">// a b c</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><code>console.log</code>方法会自动在每次输出的结尾，添加换行符。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 1</span>
<span class="token comment">// 2</span>
<span class="token comment">// 3</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><blockquote><p>console.info   前面出现蓝色标记（ 在 chrome 上与 console.log 无区别）</p> <p>console.warn  输出背景为黄色，警告信息</p> <p>console.error  输出背景为红色，错误信息</p> <p>console.dir  可以显示一个对象所有的属性和方法。</p> <p>console.log()可以取代alert()或document.write()，在网页脚本中使用console.log()时，会在浏览器控制台打印出信息。</p></blockquote> <h3 id="注释、弹窗"><a href="#注释、弹窗" class="header-anchor">#</a> 注释、弹窗</h3> <p>单引号和双引号需要配对，不能单引号配对双引号</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 单行注释 （常用）    --&gt;   注意不是返斜杠 \\    单行注释  浏览器自动换行也算单行   看行号</span>

<span class="token comment">/*
 多行注释
*/</span>

<span class="token comment">// 弹窗</span>
<span class="token comment">//很少在一个发布的项目中使用弹窗 </span>
<span class="token comment">//调试阶段会经常用到  遇到调试代码较多 建议使用console</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;这是弹出的内容&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token constant">ALERT</span><span class="token punctuation">(</span><span class="token string">&quot;错误写法，严格区分大小写&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 输入弹窗  不会使用  了解一下</span>
<span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">&quot;请输入内容&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 确认弹窗</span>
<span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">&quot;是否确认&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="js注意事项"><a href="#js注意事项" class="header-anchor">#</a> js注意事项</h3> <ul><li>严格区分大小写 ( x=1;X=1; x和X不是同一个变量)</li> <li>语法字符使用英文字符，半角字符</li> <li>缩进对齐  ---     一层语义一层缩进</li> <li>分号结尾 （可以不加，看个人或团队开发习惯而定）</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>  <span class="token comment">// 报错</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><a href="./%E7%81%AB%E7%BB%92%E6%9D%80%E6%AF%92%E5%BC%B9%E7%AA%97%E6%8B%A6%E6%88%AA.exe">火绒</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/less.html" class="prev">
        less
      </a></span> <span class="next"><a href="/./guide/notes/js/02-变量与数据类型介绍.html">
        02-变量与数据类型介绍
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/40.cadafdd6.js" defer></script>
  </body>
</html>
